import React from 'react'
import { Button, Input, Row, Col, Form } from 'antd'
const Search = Input.Search;
import Inputter from 'components/inputter'
import Selector from 'components/selector'
const FormItem = Form.Item;

export default {
  key: 'selector',
  name: 'Selector 简化选择框',
  author: '张然',
  description: '快速组装一个远程获取数据的下拉选择框。',
  isExampleFull: false,
  api: [
    {
      title: 'API',
      data: [{
        param: 'type', description: '组件的数据结构方法，本项目中存储在::share/selectorData.js::中，只能为已定义的数据结构中的一个的key值，数据结构配置见下方::selectorItem::。', type: 'string', defaultValue: '-'
      },{
        param: 'selectorItem', description: '如果::type::定义的数据结构并不能满足特定需求，可以通过改造数据结构并通过此值传入形成特定的选择器，具体配置见下方::selectorItem::。', type: 'object', defaultValue: '-'
      },{
        param: 'params', description: '::type::指定的数据结构或::selectorItem::数据内请求对应::url::时需要的参数。', type: 'object', defaultValue: '-'
      },{
        param: 'disabled', description: '是否禁用。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'showSearch', description: '是否启用搜索模式，详情见下方的::selectorItem::。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'allowClear', description: '是否显示清空按钮。', type: 'boolean', defaultValue: 'true'
      },{
        param: 'value', description: '组件的值，可为字符串或对象，若为对象则格式为{label, key}。', type: 'string|object', defaultValue: '-'
      },{
        param: 'onChange', description: '组件的值发生改变时的回调。', type: 'function(value)', defaultValue: '-'
      },{
        param: 'entity', description: '组件的::onChange::是否返回整个对象。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'filter', description: '选项过滤规则，接收原始数据对象，返回为true则显示，为false则不显示。', type: 'function(item)', defaultValue: 'item => true'
      }],
      description: ''
    },
    {
      title: 'selectorItem',
      data: [{
        param: 'url', description: '接口请求地址，参数会自带上方的::params::。', type: 'string', defaultValue: '-'
      },{
        param: 'label', description: '接口返回值数组形成的选项label显示的key字段或渲染label规则。', type: 'string|function(item)', defaultValue: '-'
      },{
        param: 'key', description: '接口返回值数组形成的选项的唯一标志，也是上方当::entity::为::false::时::onChange::返回的字段。', type: 'string', defaultValue: '-'
      },{
        param: 'offlineSearchMode', description: '当上方::showSearch::为true时，该字段表示是否是前端过滤，如果为::true::，则自动用::label::确定的字段进行筛选，否则用::searchKey::当作参数进行接口调用。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'searchKey', description: '当上方::showSearch::为true时且::offlineSearchMode::为::false::时，每次输入时自动用输入值当作参数以该值为参数名重新进行接口调用。', type: 'string', defaultValue: '-'
      },{
        param: 'listKey', description: '当我们需要的目标数据数组为返回数据中的某个字段时，该值应设置为该字段名。', type: 'string', defaultValue: '-'
      },{
        param: 'dynamicUrl', description: '是否每次打开都要重新调用接口获取数据。', type: 'boolean', defaultValue: 'false'
      }],
      description: '每一个::Selector::都是由一个::selectorItem::配置而来。'
    }],
  example: [
    {
      title: '基础用法',
      description: '点击后选远程获取值，可设置::disabled::。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <Selector type="setOfBooksByTenant"
                      onChange={context.handleChange}/>
            <br/>
            <br/>
            <Selector type="setOfBooksByTenant" disabled  placeholder="禁用"/>
          </div>
        )
      }
    },
    {
      title: '兼容antd的表单',
      description: '本组件可用于antd的::Form::组件中，使用::getFieldDecorator::包裹即可与antd表单一同使用。',
      state: {},
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='帐套' style={{ marginBottom: 12 }}>
              {getFieldDecorator('setOfBooks', {
                rules: [{
                  required: true,
                  message: '请选择'
                }]
              })(
                <Selector type="setOfBooksByTenant"/>
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    },
    {
      title: '可搜索',
      description: '设置::showSearch::可设置为可搜索，按照::selectorItem::中的::offlineSearchMode::判断是否为前端搜索模式。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <Selector type='currency'
                      params={{
                        language: 'zh_cn',
                        userOId: context.props.user.userOID
                      }}
                      filter={item => item.enable}
                      showSearch
            />
          </div>
        )
      }
    }
  ]
}
